<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>用户管理 - 电动车销售系统</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
  <link rel="stylesheet" href="${pageContext.request.contextPath}/css/purchase.css">
  <link rel="stylesheet" href="${pageContext.request.contextPath}/css/admin/userlist.css">
</head>
<body>
<header class="dashboard-header">
  <div class="container">
    <div class="d-flex justify-content-between align-items-center">
      <div>
        <h1 class="h3 mb-0"><i class="bi bi-bicycle"></i> 电动车销售管理系统</h1>
        <p class="mb-0 opacity-75">系统管理员工作台</p>
      </div>
      <div class="d-flex align-items-center">
        <div class="me-3">
          <span class="d-none d-md-inline">${currentUser.name}</span>
          <div class="badge bg-light text-dark">
            <i class="bi bi-person-circle me-1"></i> 系统管理员
          </div>
        </div>
        <div class="dropdown">
          <button class="btn btn-light rounded-circle p-1" type="button" data-bs-toggle="dropdown">
            <i class="bi bi-gear fs-5"></i>
          </button>
          <ul class="dropdown-menu dropdown-menu-end">
            <li><a class="dropdown-item" href="${pageContext.request.contextPath}/change_password.jsp"><i class="bi bi-lock me-2"></i> 修改密码</a></li>
            <li><hr class="dropdown-divider"></li>
            <li><a class="dropdown-item text-danger" href="${pageContext.request.contextPath}/LogoutServlet"><i class="bi bi-box-arrow-right me-2"></i> 退出登录</a></li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</header>

<div class="container my-4">
  <div class="d-flex justify-content-between align-items-center mb-4">
    <div>
      <h2 class="mb-0"><i class="bi bi-people me-2"></i>用户管理</h2>
      <p class="text-muted mb-0">管理系统所有用户账户</p>
    </div>
    <div>
      <a href="${pageContext.request.contextPath}/AdminDashboardServlet" class="btn btn-outline-secondary">
        <i class="bi bi-arrow-left me-1"></i> 返回管理
      </a>
    </div>
    <div>
      <a href="${pageContext.request.contextPath}/AddUserServlet" class="btn btn-primary">
        <i class="bi bi-person-plus me-1"></i> 添加新用户
      </a>
    </div>
  </div>

  <!-- 统计卡片  -->
  <div class="row mb-4">
    <div class="col-md-3">
      <div class="summary-card">
        <i class="bi bi-people fs-1 text-primary"></i>
        <div class="number">${totalCount}</div>
        <div class="title">用户总数</div>
      </div>
    </div>
    <div class="col-md-3">
      <div class="summary-card">
        <i class="bi bi-person-gear fs-1 text-primary"></i>
        <div class="number">${adminCount}</div>
        <div class="title">系统管理员</div>
      </div>
    </div>
    <div class="col-md-3">
      <div class="summary-card">
        <i class="bi bi-cart fs-1 text-success"></i>
        <div class="number">${salesCount}</div>
        <div class="title">销售管理员</div>
      </div>
    </div>
    <div class="col-md-3">
      <div class="summary-card">
        <i class="bi bi-house-gear fs-1 text-warning"></i>
        <div class="number">${warehouseCount}</div>
        <div class="title">仓库管理员</div>
      </div>
    </div>
  </div>

  <c:if test="${not empty successMsg}">
    <div class="alert alert-success alert-dismissible fade show mb-4" role="alert">
      <i class="bi bi-check-circle me-2"></i> ${successMsg}
      <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
    </div>
  </c:if>

  <c:if test="${not empty errorMsg}">
    <div class="alert alert-danger alert-dismissible fade show mb-4" role="alert">
      <i class="bi bi-exclamation-triangle me-2"></i> ${errorMsg}
      <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
    </div>
  </c:if>

  <div class="card shadow">
    <div class="card-header d-flex justify-content-between align-items-center py-3">
      <span>所有用户</span>
      <div class="d-flex">
        <div class="search-bar me-2">
          <i class="bi bi-search text-muted me-2"></i>
          <input type="text" class="border-0 bg-transparent" placeholder="搜索用户..." id="searchInput">
        </div>
        <button class="btn btn-sm btn-light" id="clearSearch">
          <i class="bi bi-arrow-counterclockwise"></i> 重置
        </button>
      </div>
    </div>

    <div class="card-body">
      <c:choose>
        <c:when test="${not empty userList}">
          <div class="table-responsive">
            <table class="table table-hover align-middle mb-0">
              <thead class="table-light">
              <tr>
                <th>ID</th>
                <th>用户信息</th>
                <th>用户名</th>
                <th>角色</th>
                <th>操作</th>
              </tr>
              </thead>
              <tbody>
              <c:forEach items="${userList}" var="user">
                <tr class="user-row">
                  <td><strong>#${user.id}</strong></td>
                  <td>
                    <div class="d-flex align-items-center">
                      <div class="me-3">
                        <div class="role-badge
                                        <c:choose>
                                            <c:when test="${user.role == 4}">role-admin</c:when>
                                            <c:when test="${user.role == 0}">role-sales</c:when>
                                            <c:when test="${user.role == 1}">role-warehouse</c:when>
                                            <c:when test="${user.role == 2}">role-salesadmin</c:when>
                                            <c:when test="${user.role == 3}">role-aftersales</c:when>
                                        </c:choose>">
                          <c:choose>
                            <c:when test="${user.role == 4}">管理员</c:when>
                            <c:when test="${user.role == 0}">业务员</c:when>
                            <c:when test="${user.role == 1}">仓库管理员</c:when>
                            <c:when test="${user.role == 2}">销售管理员</c:when>
                            <c:when test="${user.role == 3}">售后管理员</c:when>
                          </c:choose>
                        </div>
                      </div>
                      <div>
                        <div class="fw-medium">${user.name}</div>
                        <div class="text-muted small">用户ID: ${user.id}</div>
                      </div>
                    </div>
                  </td>
                  <td>${user.name}</td>
                  <td>
                    <c:choose>
                      <c:when test="${user.role == 4}">系统管理员</c:when>
                      <c:when test="${user.role == 0}">业务员</c:when>
                      <c:when test="${user.role == 1}">仓库管理员</c:when>
                      <c:when test="${user.role == 2}">业务员</c:when>
                      <c:when test="${user.role == 3}">售后管理员</c:when>
                    </c:choose>
                  </td>
                  <td>
                    <div class="d-flex gap-2">
                      <a href="${pageContext.request.contextPath}/UpdateUserServlet?id=${user.id}"
                         class="btn btn-sm btn-outline-primary action-btn">
                        <i class="bi bi-pencil"></i> 编辑
                      </a>
                      <a href="${pageContext.request.contextPath}/DeleteUserServlet?id=${user.id}"
                         class="btn btn-sm btn-outline-danger action-btn delete-btn"
                         data-user-name="${user.name}">
                        <i class="bi bi-trash"></i> 删除
                      </a>
                    </div>
                  </td>
                </tr>
              </c:forEach>
              </tbody>
            </table>
          </div>

          <div class="mt-3 text-muted small">
            <i class="bi bi-info-circle"></i>
            实际查询到 ${fn:length(userList)} 条记录
          </div>
        </c:when>
        <c:otherwise>
          <div class="empty-state">
            <i class="bi bi-people"></i>
            <h5>暂无用户数据</h5>
            <p class="text-muted">系统中还没有任何用户，点击"添加新用户"创建用户</p>
            <a href="${pageContext.request.contextPath}/AddUserServlet" class="btn btn-primary">
              <i class="bi bi-person-plus me-1"></i> 添加新用户
            </a>
          </div>
        </c:otherwise>
      </c:choose>
    </div>

    <c:if test="${not empty userList}">
      <div class="card-footer d-flex justify-content-between align-items-center">
        <div class="text-muted small">
          显示 ${(currentPage-1)*pageSize+1} 到
            ${currentPage*pageSize > totalCount ? totalCount : currentPage*pageSize} 项，共 ${totalCount} 项
        </div>
        <nav>
          <ul class="pagination pagination-sm mb-0">
            <c:if test="${currentPage > 1}">
              <li class="page-item">
                <a class="page-link" href="UserListServlet?page=${currentPage-1}">上一页</a>
              </li>
            </c:if>

            <c:forEach begin="1" end="${totalPages}" var="pageNum">
              <li class="page-item ${pageNum == currentPage ? 'active' : ''}">
                <a class="page-link" href="UserListServlet?page=${pageNum}">${pageNum}</a>
              </li>
            </c:forEach>

            <c:if test="${currentPage < totalPages}">
              <li class="page-item">
                <a class="page-link" href="UserListServlet?page=${currentPage+1}">下一页</a>
              </li>
            </c:if>
          </ul>
        </nav>
      </div>
    </c:if>
  </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script>
  // 搜索功能
  document.getElementById('searchInput').addEventListener('input', function(e) {
    const searchTerm = e.target.value.toLowerCase();
    document.querySelectorAll('.user-row').forEach(row => {
      const rowText = row.textContent.toLowerCase();
      row.style.display = rowText.includes(searchTerm) ? '' : 'none';
    });
  });

  // 重置搜索
  document.getElementById('clearSearch').addEventListener('click', function() {
    document.getElementById('searchInput').value = '';
    document.querySelectorAll('.user-row').forEach(row => {
      row.style.display = '';
    });
  });

  // 删除确认
  document.querySelectorAll('.delete-btn').forEach(btn => {
    btn.addEventListener('click', function(e) {
      const userName = this.getAttribute('data-user-name');
      if (!confirm(`确定要删除用户 ${userName} 吗？此操作不可恢复！`)) {
        e.preventDefault();
      }
    });
  });

  // 自动关闭消息提示
  document.querySelectorAll('.alert .btn-close').forEach(button => {
    button.addEventListener('click', function() {
      this.closest('.alert').style.display = 'none';
    });
  });

  // 5秒后自动关闭消息提示
  setTimeout(() => {
    document.querySelectorAll('.alert').forEach(alert => {
      alert.style.display = 'none';
    });
  }, 5000);
</script>
</body>
</html>